<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.demos-title {
		text-align: center;
		font-size: 34px;
		color: #3cc51f;
		font-weight: 400;
		margin: 0 15%;
	}
</style>
<body>


<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>请登录</b></font></h1>
</header>

<div class="mui-content">

	<h3 class="demos-title" style="margin-bottom:50px; margin-top:50px">手机号绑定</h3>
	<div class="weui-cells">
		<div class="weui-cell">
			<div class="weui-cell__hd">
                <label class="weui-label">手机号:</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input class="weui-input" type="tel" id="mobile" name="mobile" placeholder="请输入手机号" style="border: none;margin-bottom: 0px;padding: 0px"/>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">验证码:</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input class="weui_input" type="certifycode" id="certifycode" name="certifycode" placeholder="请输入验证码" style="border: none;margin-bottom: 0px;width: 100%"/>
			</div>
			<div class="weui-cell__ft">
				<button type="button" class="weui-vcode-btn" onclick="getcode(this)" >获取验证码</button>
			</div>
			<input type="hidden" id="makecode" value=""/>
		</div>
	</div>
	<div class="weui-btn-area" style="margin-top:80px">
		<a class="weui-btn weui-cell_primary" type="button" style="background-color: #04be02;" onclick="login()">登录</a>
	</div>
	<div align="center" style="margin-left: 20px;margin-right: 10px;margin-top: 20px">
		<span style="color: grey">为了保障您的权益，请务必使用您本人手机和微信号登录,如有疑问，您可拨打艾卡特客服热线:18813296010</span>
	</div>
</div>
<input id="flag" type="hidden" th:value="${flag}"/>
<input id="busiid" type="hidden" th:value="${busiid}"/>
<input id="shopid" type="hidden" th:value="${shopid}"/>

</body>
<script>
    function getcode($this) {
        if($("#mobile").val()==null||$("#mobile").val()==''){

		}else {
             if (checkPhone()) {//验证手机号码
                 /*生成四位随机数验证码*/
                 var Num="";
                 for(var i=0;i<4;i++)
                 {
                     Num+=Math.floor(Math.random()*10);
                 }
                 mui.ajax('/logingetmessage',{
                     data:{
                         code:Num,
                         mobile:$("#mobile").val()
                     },
                     type: "POST",
                     success:function(data){
                         console.log(data);
                         if(data=='success'){
                             $("#makecode").val(Num);
                         }else {
                             $.toptip('服务器出问题啦', 'error');
                         }
                     },
                     error:function(data){
                         console.log(data)
                     }
                 })
                 settime($this); //倒计时
             }
             else {
                 $("input[name='Tel']").focus();
                 return;
             }
		}
    }

    //验证手机号码
    function checkPhone() {
        var phone = $("input[name='mobile']").val();
        var pattern = /^1[0-9]{10}$/;
        if (phone.length == 0) {
            $.toptip("请输入手机号码", 'error');
            return false;
        }
        if (!pattern.test(phone)) {
            //alert('请输入正确的手机号码');
            $.toptip("手机号格式错误", 'error');
            return false;
        }
        return true;
    }
    var countdown = 60;
    function settime($this) {
        if (countdown == 0) {
            $($this).removeAttr("disabled");
            $($this).text("获取验证码");
            countdown = 60;
            return;
        } else {
            $($this).attr("disabled", true);
            $($this).text(countdown +'s'+'后重发');
            countdown--;
        }
        setTimeout(function () {
            settime($this)
        }, 1000)
    }

    /*点击提交*/
    function login() {
        var isflag=true;
        var mobile=$("#mobile").val();
        var certifycode=$("#certifycode").val();
        var pattern = /^1[0-9]{10}$/;
        if (mobile.length == 0) {
            $.toptip("请输入手机号码", 'error');
            isflag=false;
        }else if (!pattern.test(mobile)) {
            $.toptip("手机号格式错误", 'error');
            isflag=false;
        }else if(certifycode==null||certifycode==''){
            $.toptip("请输入验证码", 'error');
            isflag=false;
		}else if($("#makecode").val()!=$("#certifycode").val()){
            $.toptip("输入验证码不正确", 'error');
            isflag=false;
        }
        if(isflag){
            mui.get('/person/logincheck',{mobile:$("#mobile").val()},function(data){
                if(data=="success"){
                    var flag=$("#flag").val();
                    if(flag==1){
                        var busiid=$("#busiid").val();
                        location.href="/item/item?busiid="+busiid;
                    } else if(flag==2){
                        var shopid=$("#shopid").val();
                        location.href="/shopdetail?chnid="+shopid;
                    } else {
                        location.href="/person/personhome";
                    }
                }else {
                    $.alert("服务器出错");
                }
            });
		}
    }
</script>
</html>
